<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./js/Task_Details.js"></script>
    <link rel="stylesheet" href="./css/common.css" />
    <script src="./js/flexible.js"></script>
    <link rel="stylesheet" href="./css/Task_Details.css" />
  </head>
  <body>
    <!-- 头部 -->
    <div class="header">
      <div class="content">
        <a href="#"><img src="./images/btn_nav_back.png" alt="" /></a>
        <span>任务详情</span>
        <div class="cancellation">取消任务</div>
      </div>
    </div>

    <!-- 待提货任务编号 -->
    <div class="tasknum Public_Style">
      <div class="top">基本信息</div>
      <img src="./images/红杠.png" alt="" class="img" />
      <div class="big bgi2">
        <span class="radius1">起</span>
        <div class="verticalline"></div>
        <span class="radius2">止</span>
        <p class="article1">
          北京市昌平区回龙观街道西三旗桥东金燕龙写字楼8877号
        </p>
        <p class="article2">河南省郑州市路北区北清路99号</p>
        <div class="line"></div>
        <div class="Cargo_information">
          <div class="logistics">
            <p>任务编号</p>
            <span>1557211886558850</span>
          </div>
          <div class="number logistics">
            <p>联系人</p>
            <span>张三</span>
          </div>
          <div class="logistics">
            <p>联系电话</p>
            <span class="tel">13512345678</span>
            <img src="./images/电话_填充 2.png" alt="" />
          </div>
          <div class="logistics">
            <p>提货时间</p>
            <span>2022.05.04 13:00</span>
          </div>
          <div class="logistics">
            <p>预计送达时间</p>
            <span>2022.05.05 10:00</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 司机信息 -->
    <div class="Driver_Information Public_Style">
      <div class="box"></div>
      <div class="top">车辆司机信息</div>
      <img src="./images/红杠.png" alt="" class="img  " / >
      <div class="big big1">
        <div class="number_plate">
          <p>车牌号</p>
          <span>京A123456</span>
        </div>
        <div class="name">
          <p>司机姓名</p>
          <span>张三</span>
        </div>
      </div>
    </div>

    <!-- 运输路线 -->
    <div class="transport_route Public_Style">
      <div class="box"></div>
      <div class="top">运输路线</div>
      <img src="./images/红杠.png" alt="" class="img " />
      <div class="big big1">
        <div class="box2">
          <div class="dzbj">
            <h3>北京市</h3>
            <p>北京市</p>
          </div>
          <div class="jt">
            <img src="./images/右单箭头.png" alt="" />
          </div>
          <div class="dzhn">
            <h3>河南省</h3>
            <p>郑州市</p>
          </div>
        </div>
      </div>
    </div>


    <!-- 货物信息 -->
    <div class="Driver_Informations Public_Style">
      <div class="box"></div>
      <div class="top">货物信息<span>总计：500单</span></div>
        <img src="./images/红杠.png" alt="" class="img "/ >
        <div class="big big1">
            <div class="searchbox">
              <img src="images/搜索图标.png" alt="" />
              <input type="text" placeholder="请输入任务编号" />
            </div>
            <div class="goodslist">
              <ul>
                <li>
                  <p>SD1234567890111</p>
                  <div>1件</div>
                  <span>5kg</span>
                </li>
                <li>
                  <p>SD1234567890222</p>
                  <div>5件</div>
                  <span>10kg</span>
                </li>
                <li>
                  <p>SD1234567890333</p>
                  <div>2件</div>
                  <span>6kg</span>
                </li>
                <li>
                  <p>SD1234567890444</p>
                  <div>9件</div>
                  <span>4kg</span>
                </li>
                <li>
                  <p>SD1234567890555</p>
                  <div>6件</div>
                  <span>10kg</span>
                </li>
                <li>
                  <p>SD1234567890666</p>
                  <div>7件</div>
                  <span>4kg</span>
                </li>
                <li>
                  <p>SD1234567890777</p>
                  <div>2件</div>
                  <span>6kg</span>
                </li>
                <li>
                  <p>SD1234567890888</p>
                  <div>8件</div>
                  <span>5kg</span>
                </li>
                <li>
                  <p>SD1234567890999</p>
                  <div>9件</div>
                  <span>4kg</span>
                </li>
                <li>
                  <p>SD1234567890100</p>
                  <div>8件</div>
                  <span>5kg</span>
                </li>
                <li>
                  <p>SD1234567890101</p>
                  <div>2件</div>
                  <span>9kg</span>
                </li>
                
                </li>
              </ul>
            </div>
      </div>
    </div>

    <!-- 提货详情 -->
    <div class="transport_news Public_Style">
      <div class="box"></div>
      <div class="top">提货信息</div>
      <img src="./images/红杠.png" alt="" class="img " />
      <div class="big big1">
        <div class="top22">
          <p>请拍照上传回单凭证</p>
          <div class="pic">
            <img src="images/+.png" alt="">
          </div>
        </div>
        <div class="bottom22">
          <p>请拍照上传货品照片</p>
          <div class="pic">
            <img src="images/+.png" alt="">
          </div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="taskbottom">
      <div class="detake">延迟提货</div>
      <div class="takegoods">提货</div>
    </div>
  </body>
</html>
